<template>
	<view class="videoContent" @touchstart="onTimeOut(1)" @touchend="onTimeOut(0)">
		<!-- https://siha.vxmeng.com/ -->
		<!-- #ifndef H5 -->
		<!-- 		<template>
			<web-view :src="`http://localhost:8080/h5/#/pages/index/siha?id=${id}&token=${token}`"
				@message="backMessage"></web-view>
		</template> -->
		<!-- #endif -->
		<template>
			<view class="videoBox">
				<!-- object-fit="cover" :enable-play-gesture="true" @click="videoClick"-->
				<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
				<video poster="https://siha.vxmeng.com/static/heng.jpg" :custom-cache="false" :page-gesture="true"
					@touchend.prevent="videoClick" :danmu-list="danmuList" @longpress="onLongPress" object-fit="cover"
					class="videoPlayer" :src="videoSrc" id="videoPlayer" ref="videoPlayer" :show-center-play-btn="false"
					:poster='videoImg' autoplay :controls="false" @timeupdate='timeupdatefn' :danmu-btn="true"
					@ended="endVideo">
				</video>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<video-player :resource-id="info.resource_id+''" :seq-id="info.seq_id+''" cloud-type="1" poster="https://siha.vxmeng.com/static/heng.jpg" :custom-cache="false" :page-gesture="true"
					@touchend.prevent="videoClick" :danmu-list="danmuList" @longpress="onLongPress" object-fit="cover"
					class="videoPlayer" id="videoPlayer" ref="videoPlayer" :show-center-play-btn="false"
					:poster='videoImg' autoplay :controls="false" @timeupdate='timeupdatefn' :danmu-btn="true"
					@ended="endVideo" @error="videoError">
				</video-player>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<video poster="https://siha.vxmeng.com/static/heng.jpg" :custom-cache="false" :page-gesture="true"
					@touchend.prevent="videoClick" :danmu-list="danmuList" @longpress="onLongPress" object-fit="cover"
					class="videoPlayer" :src="videoSrc" id="videoPlayer" ref="videoPlayer" :show-center-play-btn="false"
					:poster='videoImg' autoplay :controls="false" @timeupdate='timeupdatefn' :danmu-btn="true"
					@ended="endVideo">
				</video>
				<!-- #endif -->
				<view class="hideVideo" style="z-index: -1;position: absolute;top: 0;left: 0;visibility: hidden">
					<video-player show-center-play-btn="false" :custom-cache="false" v-for="(item,index) in info.xia_result"
						:src="item.file?getImg(item.file):''" :autoplay="false"></video-player>
				</view>
				<!-- #ifndef MP-TOUTIAO -->
				<view @click.stop="onBack"
					style="position: fixed;top: 0px;left: 0px;z-index: 100000000001;display: flex;align-items: center;color: #fff;padding:20px 10px 20px 38px;min-width: 200px;">
					<image style="width: 10px;height: 15px;" src="https://siha.vxmeng.com/static/component/fh.png"
						mode="widthFix"></image>
					<view style="margin-left: 20px;">{{info.name}}</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view @click.stop="onBack"
					style="position: fixed;top: 0;left: 0px;z-index: 100000000001;display: flex;align-items: center;color: #fff;padding:20px 10px 20px 20px;min-width: 200px;">
					<image style="width: 10px;height: 15px;" src="https://siha.vxmeng.com/static/component/fh.png"
						mode="widthFix"></image>
					<view style="margin-left: 10px;font-size: 14px;">{{info.name}}</view>
				</view>
				<!-- #endif -->
				<!-- <view v-show="!isDm"
					style="position: fixed;top: 100px;left:0;z-index: 999999999;width: 100%;height: 300px;"
					v-html="canvasDmo"></view> -->

				<!-- 视频结束弹出 -->
				<view :style="{'left':isPop?'0px':'100000px'}"
					style="position: fixed;bottom: 0px;height: 100vw;width: 100vh;padding: 20px 0;z-index: 100000001;background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 1%, rgba(51, 51, 51, 0.88) 92%);;display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<view
						style="color: #fff;font-size: 18px;width: 100%;word-break: break-all;word-wrap:break-word;white-space:pre-line;line-height: 1.6;text-align: center;">
						{{info.mental_activity || ""}}
					</view>
					<view class="options">
						<view v-if="info.xia_result.length>0"
							style="min-width: 150px;padding:0 20px;border-radius: 20px;border:1px solid #fff;font-size: 16px;color: #fff;text-align: center;margin-top: 15px;height: 40px;display: flex;align-items: center;justify-content: center;line-height: 40px;background: url('https://siha.vxmeng.com/static/index/bt-bg.png') no-repeat;background-size: cover;"
							@click.stop="xz(0)">{{info.xia_result.length>0?info.xia_result[0].name:''}}</view>
						<view v-if="info.xia_result.length>1"
							style="min-width: 150px;padding:0 20px;border-radius: 40px;border:1px solid #fff;font-size: 16px;color: #fff;text-align: center;margin-top: 15px;height: 40px;display: flex;align-items: center;justify-content: center;line-height: 40px;background: url('https://siha.vxmeng.com/static/index/bt-bg.png') no-repeat;background-size: cover;"
							@click.stop="xz(1)">{{info.xia_result.length>1?info.xia_result[1].name:''}}</view>
						<view v-if="info.xia_result.length>2"
							style="min-width: 150px;padding:0 20px;border-radius: 40px;border:1px solid #fff;font-size: 16px;color: #fff;text-align: center;margin-top: 15px;height: 40px;display: flex;align-items: center;justify-content: center;line-height: 40px;background: url('https://siha.vxmeng.com/static/index/bt-bg.png') no-repeat;background-size: cover;"
							@click.stop="xz(2)">{{info.xia_result.length>2?info.xia_result[2].name:''}}</view>
						<view v-if="info.xia_result.length>3"
							style="min-width: 150px;padding:0 20px;border-radius: 40px;border:1px solid #fff;font-size: 16px;color: #fff;text-align: center;margin-top: 15px;height: 40px;display: flex;align-items: center;justify-content: center;line-height: 40px;background: url('https://siha.vxmeng.com/static/index/bt-bg.png') no-repeat;background-size: cover;"
							@click.stop="xz(3)">{{info.xia_result.length>3?info.xia_result[3].name:''}}</view>
						<view v-if="info.xia_result.length>4"
							style="min-width: 150px;padding:0 20px;border-radius: 40px;border:1px solid #fff;font-size: 16px;color: #fff;text-align: center;margin-top: 15px;height: 40px;display: flex;align-items: center;justify-content: center;line-height: 40px;background: url('https://siha.vxmeng.com/static/index/bt-bg.png') no-repeat;background-size: cover;"
							@click.stop="xz(4)">{{info.xia_result.length>4?info.xia_result[4].name:''}}</view>
					</view>
				</view>
				<view class="episodePop" v-if="isPopset">
					<view class="item xd">
						<view class="it" v-for="(item,index) in episodeInfoCharacter">
							<text>{{item.name}}</text>
							<image src="https://siha.vxmeng.com/static/index/xd.png" mode="widthFix"></image>
							<text>{{item.usergood_num}}</text>
						</view>
					</view>
				</view>
				<view class="popSet" v-if="isPopset"
					style="position: fixed;bottom: 15px;left: 0;z-index: 100001;width: 100%;display: flex;align-items: center;justify-content: space-between;flex-direction: column;font-size: 18px;">
					<view style="width: 90vh;height: 4px;background: rgba(255,255,255,0.3);border-radius: 43px;">
						<view style="height: 4px;background: #D8D8D8;border-radius: 43px;" :style="{'width':num+'%'}">
						</view>
					</view>
					<!-- <view class="slideBox"> -->
						<!-- <s-slider backgroundColor="rgba(255,255,255,0.3)" activeColor="#D8D8D8" blockColor="#fff" v-model="num" min="0" max="100" size="16" step="0.01" sizeUnit="px" @changing="sliderChanging"/> -->
						<!-- <slider backgroundColor="rgba(255,255,255,0.3)" active-color="#D8D8D8" block-color="#fff"
							block-size="16" :value="num" min="0" max="100" step="0.01" @change="sliderChanging" /> -->
					<!-- </view> -->
					<view style="width: 95%;display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;box-sizing: border-box;align-items: center;margin-left: 15px;">
							<image v-if="isPlay" @click.stop="changePlay(false)"
								src="https://siha.vxmeng.com/static/index/xbf.png" mode="widthFix"
								style="width: 20px;height: 20px;margin-right: 15px;"></image>
							<image v-else @click.stop="changePlay(true)"
								src="https://siha.vxmeng.com/static/index/xzt.png" mode="widthFix"
								style="width: 20px;height: 20px;margin-right: 15px;"></image>
							<!-- 							<image v-if="isDm" @click.stop="changeDm(false)"
								src="https://siha.vxmeng.com/static/index/hidedanmu.png" mode="widthFix"
								style="width: 24px;height: 24px;padding: 8px;"></image>
							<image v-else @click.stop="changeDm(true)"
								src="https://siha.vxmeng.com/static/index/danmu.png" mode="widthFix"
								style="width: 24px;height: 24px;padding: 8px;"></image> -->
						</view>
						<!-- <view style="display: flex;box-sizing: border-box;align-items: center;color: #fff;">
							<input
								style="width: calc(100vh - 245px);height: 24px;background: rgba(255,255,255,0.3);border-radius: 236px;font-size: 12px;padding: 0 10px 0 10px;box-sizing: border-box;color: #fff;"
								v-model="danmuText" type="text" :placeholder="$t('index.fgdmhy')"
								@focus="onTimeOut(1)" />
							<image @click.stop="sendDanmu" src="https://siha.vxmeng.com/static/privacy/3.png"
								mode="widthFix" style="width: 25px;height: 25px;margin-left: 20px;"></image>
						</view> -->
						<!-- <view style="padding: 10px;color: #fff;" @click="onFillScreen">全屏</view> -->
						<view
							style="display: flex;padding: 10px 0px;box-sizing: border-box;align-items: center;margin-right: 15px;">
							
							<view @click="changeSpeedPop(true)" style="padding: 10px;color: #fff;">
								{{speed=='1.0'?$t('index.bs'):speed+'X'}}</view>
							<image @click.stop="sendLink" src="https://siha.vxmeng.com/static/index/xj.jpg"
								mode="widthFix" style="width: 24px;height: 24px;"></image>
						</view>
					</view>
				</view>
				<!-- <uni-popup ref="popup" type="right" style="z-index: 1000001;"> -->
				<view class="fzsBox" v-if="isRight" @click.stop="hideLine" @touchmove.stop="">
					<view class="fzs" @click.stop="">
						<episode></episode>
					</view>
				</view>
				<!-- </uni-popup> -->

				<view class="djPop" v-if="isDjPop" @click.stop="">
					<image src="https://siha.vxmeng.com/static/index/dj-bg.png" mode="widthFix"></image>
					<view class="box">
						<image :src="getImg(propObj.image)" mode="widthFix"></image>
						<image @click="hideDjPop" class="close" src="https://siha.vxmeng.com/static/index/cha.png"
							mode="widthFix"></image>
						<text class="name">{{propObj.name}}</text>
						<text class="info">{{propObj.blurb}}</text>

						<view v-if="propObj.prop_status==2" class="btn" @click="payProp">{{$t('index.gmdjbljsy')}}
						</view>
						<view v-else class="btn" @click="lookFun(propObj.user_bag_id)">{{$t('index.sydj')}}</view>
					</view>
				</view>

				<!-- 				<view class="xsDm" :class="isXsDm?'active':''">
				  <view class="l">
				    <image src="https://siha.vxmeng.com/static/index/xs.png" mode="widthFix"></image>
				    <view class="t">
				      <image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
				      <view>3999</view>
				    </view>
				  </view>
				  <text>{{$t('index.gmdjks')}}</text>
				  <view class="buy" @click="toBuy">{{$t('index.gm')}}</view>
				</view> -->

				<!-- 				<view class="xsPop" v-if="isXsPop">
					<view class="top">
						<image @click="hideXsPop" class="close" src="https://siha.vxmeng.com/static/index/close.png" mode="widthFix"></image>
						<image class="img" src="https://siha.vxmeng.com/static/index/xs.png" mode="widthFix"></image>
						<view class="tr">
							<view class="t">
								<image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
								<text>3999</text>
							</view>
							<view>{{$t('index.xs')}}</view>
						</view>
						<view class="bl">
							<view>{{$t('index.xdzzzbl')}}</view>
							<text>200%</text>
						</view>
					</view>
					<view class="bot">
						<text>{{$t('index.dsyz')}}</text>
						<view @click="onBuy" class="btn">{{$t('index.ljgm')}}</view>
					</view>
				</view> -->

				<view class="speed" v-if="isSpeedPop" @click.stop="changeSpeedPop(false)">
					<view class="speedBox">
						<view class="speedItem" @click.stop="setSpeed(item)" v-for="item in speedList">{{item+'X'}}
						</view>
					</view>
				</view>

				<view class="topSpeed" v-if="islongPress&&!isPlay">
					<image :src="getImg('/static/index/speed.png')" mode="widthFix"></image>
					<text>1.5{{$t('index.bsbfz')}}</text>
				</view>
			</view>
		</template>
		<!-- <view class="popXin" v-if="isXdz">
			<image src="https://siha.vxmeng.com/static/index/xdh.gif" mode=""></image>
		</view> -->

		<!-- #ifndef MP-TOUTIAO -->
		<comLack v-if="isLack" @hide="hideLack" value="500"></comLack>
		<comReward v-if="isObtain"></comReward>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<comLackDy v-if="isLack" @hide="hideLack" value="500"></comLackDy>
		<comRewardDy v-if="isObtain"></comRewardDy>
		<!-- #endif -->
		<comPayPlus v-if="isPay" @hidePay="hidePay"></comPayPlus>
		<!-- #ifdef H5 -->
		<!-- #endif -->
	</view>
</template>

<script>
	let wpx = uni.upx2px(750)
	let that = null;
	import sSlider from '@/components/simple-slider/simple-slider.vue';
	export default {
		components: {
			sSlider
		},
		name: "smm-video",
		data() {
			return {
				timeout: null,
				isObtain: false,
				timer: null,
				startTime: 0,
				watchTime: 0,
				taskInfo: {},
				isXsDm: false,
				isXsPop: false,
				isDjPop: false,
				czType: 1,
				isPay: false,
				isPopset: true,
				isRight: false,
				canvasDmo: `<canvas id="canvas" width="${wpx}" height="${wpx/2}"></canvas>`,
				listData: [],
				intVal: null,
				isPop: false,
				subNVue: null,
				isPlay: false,
				isDm: false,
				num: 0,
				videoCtx: null,
				danmuText: "",
				videoSrc: '',
				videoImg: '',
				dmlist: [],
				id: '',
				token: '',
				info: {
					xia_result: []
				},
				danmuList: [],
				currentTime: 0,
				duration: 0,
				episodeInfoCharacter: [],
				isXdz: false,
				touchNum: 0,
				propObj: {},
				keepClose: true,
				isSpeedPop: false,
				speedList: [],
				speed: 1.0,
				islongPress: null,
				isLack: false,
			};
		},
		onReady() {
			this.$music.bgmInstance.destroy();
			this.$music.bgmInstance = null;

			this.speedList = [1.5, 1.25, 1.0, 0.8, 0.5]
			// #ifdef MP-WEIXIN
			this.speedList = [2.0, 1.5, 1.25, 1.0, 0.8, 0.5]
			// #endif

			this.watchTime = this.$tools.getStore("watchTime");
			this.onPlay()

			// #ifdef APP
			// this.subNVue = uni.getSubNVueById('drawer');
			// #endif
			// this.subNVue.hide()
			// this.subNVue.show()
		},
		onLoad(options) {
			this.id = options.id
			this.token = options.token || uni.getStorageSync('token')
			if (options.token) {
				uni.setStorageSync('token', this.token)
			}
			this.doLookEpisodeInfo()
			clearInterval(this.intVal)
			// #ifndef APP
			// this.colrdo()
			// #endif
			// uni.$on('sendData',res=>{
			// 	console.log(res)
			// 	let {type} = res
			// 	if(type=="back") {
			// 		this.$tools.toBack()
			// 	}
			// })
		},
		onShow() {
			setTimeout(() => {
				if (this.$music.bgmInstance) {
					this.$music.bgmInstance.destroy();
					this.$music.bgmInstance = null;
				}
			}, 0)

			if (this.$tools.getStore('share_dou')) {
				this.$music.play_obtain();
				this.isObtain = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.isObtain = false;
					// this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
				}, 1500);
				this.$tools.setStore('share_dou', false)
			}

			// this.$refs.popup.close()
			// 获取 video 对象
			this.videoCtx = uni.createVideoContext("videoPlayer", this);
			this.getEpisodeBarrage()
			this.getEpisodeInfoCharacter()

			//禁止用户录屏
			// #ifdef MP-WEIXIN
			if (wx.setVisualEffectOnCapture) {
				wx.setVisualEffectOnCapture({
					visualEffect: 'hidden',
					success: res => {
						console.log('微信禁用录屏', res);
					}
				})
			}
			// #endif

			// #ifdef MP-TOUTIAO
			// tt.disableUserScreenRecord({
			// 	success: res => {
			// 		console.log('抖音禁用录屏',res);
			// 	}
			// })
			// #endif
		},
		onUnload() {
			clearInterval(this.intVal)
			// #ifdef MP-WEIXIN
			if (wx.setVisualEffectOnCapture) {
				wx.setVisualEffectOnCapture({
					visualEffect: 'none',
					success: res => {
						console.log('微信取消禁用录屏', res);
					}
				})
			}
			// #endif

			// #ifdef MP-TOUTIAO
			// tt.enableUserScreenRecord({
			// 	success: res => {
			// 		console.log('抖音取消禁用录屏',res);
			// 	}
			// })
			// #endif
		},
		methods: {
			videoError(e){
				console.log(e)
			},
			onFillScreen() {
				this.videoCtx.requestFullScreen()
				// this.videoCtx.exitFullScreen()
			},
			onTimeOut(e) {
				if (e) {
					if (this.timeout) {
						clearTimeout(this.timeout)
					}
				} else {
					this.timeout = setTimeout(() => {
						this.isPopset = false
					}, 4000)
				}
			},
			setSpeed(item) {
				this.speed = item
				this.videoCtx.playbackRate(this.speed)
				this.isSpeedPop = false
			},
			changeSpeedPop(e) {
				if (e) {
					this.isPopset = false
				}
				this.isSpeedPop = e
			},
			async payProp() {
				const res = await this.$myRequest({
					url: 'api/prop/doUserPropOrder',
					data: {
						system_prop_id: this.propObj.id
					}
				})
				if (res.code == 1) {
					console.log(res.data)
					this.lookFun(res.data.user_bag_id)
				} else if (res.code == 999) {
					this.isDjPop = false
					this.isPay = true
				}
			},
			async lookFun(e) {
				this.isDjPop = false
				const res = await this.$myRequest({
					url: '/api/episode/doLookEpisodeMoney',
					data: {
						episode_info_id: this.id,
						user_bag_id: e
					}
				})
				if (res.code == 1) {
					console.log(res.data)
					this.isPop = false
					this.doLookEpisodeInfo()
					this.getEpisodeInfoCharacter()
					if (this.czType == 1) {
						this.changePlay(false)
					}
				} else if (res.code == 999) {
					this.isPay = true
				} else if (res.code == 888) {
					this.isDjPop = true
					this.propObj = res.data
					this.propObj.prop_status = 2
				} else if (res.code == 777) {
					this.isDjPop = true
					this.propObj = res.data
					this.propObj.prop_status = 1
				}
			},
			toBuy() {
				this.isXsPop = true
			},
			async onBuy() {
				this.isXsPop = false
				const res = await this.$myRequest({
					url: 'api/prop/doUserPropOrder',
					data: {
						system_prop_id: 16
					}
				})
				if (res.code == 1) {
					this.$tools.showTx(this.$t('index.gmcgqcs'))
				}
			},
			hideLine() {
				this.isRight = false
			},
			onBack() {
				this.onEnded();
				this.$tools.toRe('/pages/index/index')
			},
			hideDjPop() {
				this.isDjPop = false
				this.onBack()
			},
			hideXsPop() {
				this.isXsPop = false
			},
			hideLack(e) {
				if (e == 2) {
					this.isLack = false;
					if (this.info.xia_result[0].type != 1) {
						this.isPop = true
					} else {
						this.feeDeduction()
					}
				} else if (e == 0) {
					this.isLack = false
					this.onBack()
				}
			},
			async hidePay(e) {
				this.isPay = false
				if (e == 1) {
					this.isLack = true
				} else if (this.info.xia_result[0].type != 1) {
					this.isPop = true
				} else {
					this.feeDeduction()
				}
			},
			onLongPress() {
				if (!this.isPop) {
					this.isPopset = false;
					// #ifdef MP-WEIXIN
					this.videoCtx.playbackRate(2);
					// #endif
					// #ifndef MP-WEIXIN
					this.videoCtx.playbackRate(1.5);
					// #endif
					this.islongPress = setTimeout(() => {
						this.islongPress = true
					}, 100)
				}
			},
			videoClick() {
				if (this.islongPress) {
					this.islongPress = false
					this.videoCtx.playbackRate(this.speed);
				}
				if (!this.isPop) {
					this.touchNum++
					setTimeout(() => {
						if (this.touchNum == 1) {
							this.isPopset = !this.isPopset
						}
						if (this.touchNum >= 2) {
							this.changePlay(!this.isPlay)
						}
						this.touchNum = 0
					}, 250)
				}
			},
			sliderChanging(e) {
				console.log(this.videoCtx)
				const target = e.detail.value / 100 * this.duration
				if (this.info.xia_result.length == 0) {
					this.videoCtx.seek(parseInt(target))
					return
				}
				if (parseInt(target) >= parseInt(this.duration - this.info.dao_num) || this.info.xia_result[0].type != 1) {
					this.isPopset = false
				}
				this.videoCtx.seek(parseInt(target))
			},
			async getEpisodeInfoCharacter() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeInfoCharacter',
					data: {
						episode_info_id: this.id
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.episodeInfoCharacter = res.data
				}

			},
			async getEpisodeBarrage() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeBarrage',
					data: {
						episode_info_id: this.id,
						time_start: 0,
						time_end: 3600
					}
				})
				if (res.code == 1) {
					console.log(res)
					for (let s of res.data.list) {
						this.danmuList.push({
							text: s.remark,
							color: this.getRandomColor(),
							time: s.time_val
						})
					}
				}
			},
			async sendDanmu() {
				if (this.danmuText == '') {
					return
				}
				const res = await this.$myRequest({
					url: 'api/episode/doAddEpisodeBarrage',
					data: {
						episode_info_id: this.id,
						time_val: parseInt(this.currentTime),
						remark: this.danmuText
					}
				})
				if (res.code == 1) {
					this.videoCtx.sendDanmu({
						text: '\n\r' + this.danmuText,
						color: this.getRandomColor()
					})
					this.danmuText = ""
				} else {
					this.$tools.showTx(this.$t('index.fssbhwjc'))
				}
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			sendLink() {
				// this.isRight = true
				this.$tools.toLink('/pages/index/episode?episode_script_id=' + this.id)
			},
			async doLookEpisodeInfo() {
				const res = await this.$myRequest({
					url: 'api/episode/doLookEpisodeInfo',
					data: {
						source: 1,
						episode_info_id: this.id
					}
				})
				if (res.code == 1) {
					console.log(res.data)
					this.info = res.data
					if (res.data.file) {
						this.videoSrc = this.getImg(res.data.file)
						this.changePlay(false)
						this.danmuList = []
						this.getEpisodeBarrage()
						setTimeout(() => {
							this.keepClose = true
						}, 250)
					} else {
						// if (res.data.xia_result[0].type==1) {
						this.id = this.info.xia_result[0].id
						this.doLookEpisodeInfo()
						// }
					}
				} else if (res.code == 666) {
					this.feeDeduction()
				}
			},
			async feeDeduction() {
				const res = await this.$myRequest({
					url: '/api/episode/doLookEpisodeMoney',
					data: {
						episode_info_id: this.id
					}
				})
				if (res.code == 1) {
					console.log(res.data)
					this.isPop = false
					this.getEpisodeInfoCharacter()
					this.doLookEpisodeInfo()
				} else if (res.code == 999) {
					this.isPay = true
					this.czType = 1
				} else if (res.code == 888) {
					this.isDjPop = true
					this.propObj = res.data
					this.propObj.prop_status = 2
				} else if (res.code == 777) {
					this.isDjPop = true
					this.propObj = res.data
					this.propObj.prop_status = 1
				}
			},
			async xz(e) {
				this.isPop = false
				this.id = this.info.xia_result[e].id
				const res = await this.$myRequest({
					url: '/api/episode/doLookEpisodeMoney',
					data: {
						episode_info_id: this.id
					}
				})
				if (res.code == 1) {
					console.log(res.data)
					this.getEpisodeInfoCharacter()
					this.doLookEpisodeInfo()
				} else if (res.code == 999) {
					this.isPay = true
					this.czType = 2
				} else if (res.code == 888) {
					this.isPop = false
					this.isDjPop = true
					this.propObj = res.data
					this.propObj.prop_status = 2
				} else if (res.code == 777) {
					this.isPop = false
					this.isDjPop = true
					this.propObj = res.data
					this.propObj.prop_status = 1
				}
			},
			changePlay(e) {
				if (e) {
					this.videoCtx.pause();
					this.onPause();
				} else {
					this.videoCtx.play();
					this.onPlay();
				}
				this.isPlay = e
			},
			changeDm(e) {
				this.isDm = !this.isDm
			},
			// 播放时间发生改变 处理函数
			async timeupdatefn(e) {
				console.log(e)
				// #ifdef MP-TOUTIAO
				let detailObj = e.detail.detail
				// #endif
				// #ifndef MP-TOUTIAO
				let detailObj = e.detail
				// #endif
				this.currentTime = detailObj.currentTime
				this.duration = detailObj.duration
				this.num = detailObj.currentTime / detailObj.duration * 100
				console.log(this.num)
				if (parseInt(detailObj.currentTime) == 3 && this.isXdz == false) {
					this.isXdz = true
					setTimeout(() => {
						this.isXdz = false
					}, 700)
				}

				if (this.info.xia_result.length == 0) {
					return
				}

				if (this.info.xia_result.length > 1 || this.info.xia_result[0].system_prop_id != 0) {
					if (detailObj.duration && parseInt(detailObj.currentTime) >= parseInt(detailObj.duration - this.info
							.dao_num)) {
						this.isPopset = false;
						if (!this.isDjPop && this.keepClose) {
							this.onPause()
							this.isSpeedPop = false
							this.isPop = true
							this.keepClose = false
						}
					}
				}

				if (this.duration - this.currentTime <= 10) {
					this.isXsDm = true
				}
			},
			async endVideo(e) {
				if (this.info.xia_result[0].type == 1) {
					this.onPause()
					this.id = this.info.xia_result[0].id
					const res = await this.$myRequest({
						url: '/api/episode/doLookEpisodeMoney',
						data: {
							episode_info_id: this.id
						}
					})
					if (res.code == 1) {
						console.log(res.data)
						this.isPop = false
						this.getEpisodeInfoCharacter()
						this.doLookEpisodeInfo()
						// this.isXsDm = false
					} else if (res.code == 999) {
						this.isPay = true
						this.czType = 1
					} else if (res.code == 888) {
						this.isDjPop = true
						this.propObj = res.data
						this.propObj.prop_status = 2
					} else if (res.code == 777) {
						this.isDjPop = true
						this.propObj = res.data
						this.propObj.prop_status = 1
					}
				}
			},
			async getSystemTask() {
				const res = await this.$myRequest({
					url: 'api/system/getSystemTask',
					method: 'GET',
					data: {}
				})
				if (res.code == 1) {
					this.taskInfo = res.data
				}
			},
			async doTask(type) {
				const res = await this.$myRequest({
					url: "api/task/doAddUserTesk",
					data: {
						type,
					},
				});
			},
			onPlay() {
				this.startTime = new Date().getTime();
			},

			onPause() {
				const currentTime = new Date().getTime();
				//开始时间结束时间不在同一天，开始时间设0点
				if ((new Date(this.startTime)).getDay() !== (new Date(currentTime)).getDay()) {
					this.startTime = new Date();
					this.startTime.setHours(0);
					this.startTime.setMinutes(0);
					this.startTime.setSeconds(0);
					this.startTime.setMilliseconds(0);
					this.startTime = this.startTime.getTime();
					this.watchTime = 0;
				}
				this.watchTime = Number(this.watchTime) + Number((currentTime - this.startTime) / 1000);
				uni.setStorageSync("watchTime", this.watchTime);
			},

			onEnded() {
				if (!this.isPlay) {
					this.onPause();
				}
				this.checkCompletion();
			},

			async checkCompletion() {
				if (this.watchTime >= 600) {
					await this.getSystemTask()
					if (this.taskInfo.day_look == 2) {
						this.doTask(3);
						uni.setStorageSync("watchTime", 0);
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	video::-webkit-media-placeholder {
		content: url('https://siha.vxmeng.com/static/heng.jpg');
	}

	video::-moz-media-placeholder {
		content: url('https://siha.vxmeng.com/static/heng.jpg');
	}

	video::-ms-media-placeholder {
		content: url('https://siha.vxmeng.com/static/heng.jpg');
	}

	video::-o-media-placeholder {
		content: url('https://siha.vxmeng.com/static/heng.jpg');
	}

	video::media-placeholder {
		content: url('https://siha.vxmeng.com/static/heng.jpg');
	}

	/* #endif */

	.videoContent {
		width: 100vh;
		height: 104vw;
		overflow: hidden;
		display: flex;
		justify-content: center;
		transform: rotate(90deg);
		transform-origin: 26% 50%;

		.videoBox {
			height: 100vw;
			width: 100vh;
			overflow: hidden;
			position: absolute;
			bottom: 0;

			.videoPlayer {
				width: 100vh;
				height: 100vw
			}

			.djPop {
				width: 204px;
				height: 257px;
				position: fixed;
				top: 50%;
				left: 50%;
				z-index: 100000003;
				transform: translate(-50%, -50%);

				>image {
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: -1;
				}

				.box {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #fff;

					image {
						width: 100px;
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
					}

					.close {
						width: 20px;
						top: 46px;
						left: 164px;
						transform: none;
					}

					.name {
						font-size: 18px;
						margin-top: 110px;

					}

					.info {
						font-size: 10px;
						width: 119px;
						text-align: center;
						margin-top: 5px;
					}

					.btn {
						position: absolute;
						bottom: 24px;
						padding: 10px 20px;
						font-size: 12px;
						border-radius: 20px;
						background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
					}
				}
			}
		}
	}

	.options {
		width: 100%;
		height: 90px;
		padding: 0 90px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-evenly;
		position: absolute;
		bottom: 20px;
		/* #ifdef MP-TOUTIAO */
		bottom: 45px;
		/* #endif */
	}

	.pao {
		/* #ifdef APP */
		transform: 'translateX(100%)';
		right: 0;
		/* #endif */
		position: absolute;
		top: 0;
		/* #ifndef APP */
		right: -300px;
		/* #endif */
		// left: 0;
	}

	.all-content {
		position: relative;
		overflow: hidden;
	}

	@keyframes moveRight {
		0% {
			transform: translateX(0);
		}

		/* 初始位置为原点 */
		100% {
			transform: translateX(-1200px);
		}

		/* X轴最后移动到400像素处 */
	}

	.episodePop {
		width: 186px;
		opacity: 1;
		position: fixed;
		z-index: 100000001;
		color: #D8D8D8;
		font-size: 14px;
		right: 0;
		bottom: 125px;
		display: flex;
		flex-direction: column;
		padding: 0 15px;
		box-sizing: border-box;
		align-items: flex-end;
		justify-content: center;

		.item {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 10px;
			background: rgba(77, 77, 77, 0.51);
			border-radius: 12px;
			padding: 10px;

			image {
				width: 24px;
			}

			&.xd {

				// overflow: auto;
				.it {
					display: flex;
					align-items: center;

					image {
						width: 15px;
						margin: 0 10px;
					}
				}
			}
		}

		text {
			padding: 5px 0;

			&:last-child {
				border: none;
			}
		}
	}

	.slideBox {
		width: 100%;

		/deep/slider {
			margin: 0 18px !important;
		}

		/deep/uni-slider .uni-slider-handle-wrapper {
			height: 7px;
		}

		/deep/uni-slider .uni-slider-track {
			background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
		}
	}

	.fzsBox {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		// background: rgba(#000,0.5);
		z-index: 999999999999999999;
		overflow: hidden;
	}

	.fzs {
		position: fixed;
		right: 0;
		top: 0;
		width: 50vh;
		height: 100vw;
		// background: rgba(#000,0.5);
		z-index: 999999999999999999;
		overflow: hidden;
	}

	.popXin {
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 101;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xsDm {
		position: fixed;
		width: 540px;
		top: 30%;
		left: 100%;
		height: 40px;
		font-size: 12px;
		color: #fff;
		background: url("https://siha.vxmeng.com/static/index/xsdm-bg.png") no-repeat 100%/100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 100000001;

		@keyframes slideOut {
			0% {
				left: 100%;
			}

			100% {
				left: -1000px;
			}
		}

		&.active {
			animation: slideOut 8s linear;
			animation-fill-mode: backwards;
		}

		.l {
			width: 80px;
			height: 100%;
			position: relative;

			&>image {
				width: 54px;
				position: absolute;
				top: -15px;
				left: 10px;
			}

			.t {
				position: absolute;
				bottom: -6px;
				height: 26px;
				padding: 16px 16px 14px 10px;
				font-size: 10px;
				line-height: 20px;
				left: 8px;
				display: flex;
				text-align: center;
				align-items: center;
				background: url("https://siha.vxmeng.com/static/index/xshf.png") no-repeat 100%/100%;

				image {
					width: 10px;
				}
			}
		}

		.buy {
			height: 20px;
			padding: 5px 10px;
			border-radius: 10px;
			line-height: 12px;
			box-sizing: border-box;
			margin: 0 16px;
			background: linear-gradient(270deg, #5f58fd 0%, #62b6fc 100%);
		}
	}

	.xsPop {
		z-index: 100000002;
		width: 206px;
		height: 250px;
		padding: 15px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -56%);
		background: url('https://siha.vxmeng.com/static/index/xs-pop-bg.png') no-repeat center/cover;
		color: #fff;

		.top {
			position: relative;
			width: 100%;
			height: 100px;

			image {
				&.close {
					width: 12px;
					top: -3px;
					right: 0px;
					position: absolute;
				}

				&.img {
					display: block;
					width: 110px;
					margin: auto;
				}
			}

			.tr {
				position: absolute;
				top: 5px;
				right: 13px;
				font-size: 12px;
				text-align: end;

				image {
					width: 16px;
				}

				.t {
					font-size: 14px;
					font-weight: bold;
					display: flex;
					align-items: center;
				}
			}

			.bl {
				position: absolute;
				bottom: 0px;
				left: 0px;
				font-size: 8px;
				text-align: center;

				text {
					font-size: 14px;
				}
			}
		}

		.bot {
			width: 100%;
			height: 78px;
			margin-top: 34px;
			line-height: 12px;

			text {
				font-size: 8px;
			}

			view {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 15px;
				width: 80px;
				height: 24px;
				font-size: 12px;
				border-radius: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(279deg, #62B6FC 0%, #5F58FD 77%, #5F58FD 99%);
			}
		}
	}

	.speed {
		width: 100vh;
		height: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100000003;

		.speedBox {
			width: 160px;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			color: #fff;
			background-color: rgba(0, 0, 0, .6);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.speedItem {
				width: 100%;
				padding: 16px 0;
				text-align: center;
			}
		}
	}

	.topSpeed {
		position: fixed;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		background-color: rgba(0, 0, 0, .5);
		padding: 10px 16px;
		font-size: 14px;
		border-radius: 6px;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 6rpx;
		}
	}
	
	::v-deep .comPay{
		width: 100vh;
		min-height: 100vw;
		.payBox{
			min-height: 100vw;
			.top{
				height: calc(100vw - 60px);
			}
			.moneyList{
				width: 50vh;
			}
		}
	}
</style>